.grid-box(@rows, @columns, @gap, @padding) {
    display: grid;
    grid-template-rows: @rows;
    grid-template-columns: @columns;
    grid-gap: @gap;
    padding: @padding;
}

.grid-child-row(@start, @end) {
    grid-row-start: @start;
    grid-row-end: @end;
}

.grid-child-column(@start, @end) {
    grid-column-start: @start;
    grid-column-end: @end;
}

.grid-child(@row-start, @row-end, @column-start, @column-end) {
    .grid-child-row(@row-start, @row-end);
    .grid-child-column(@column-start, @column-end);
}

.full() {
    width: 100%;
    height: 100%;
}

.flex-box(@justify, @align, @gap, @direction) {
    display: flex;
    flex-direction: @direction;
    align-items: @align;
    justify-content: @justify;
    gap: @gap;
}

.flex-row(@justify, @align, @gap) {
    .flex-box(@justify, @align, @gap, row);
}

.flex-column(@justify, @align, @gap) {
    .flex-box(@justify, @align, @gap, column)
}

.flex-row-space(@gap) {
    .flex-row(space-between, center, @gap);
}

.flex-column-space(@gap) {
    .flex-column(space-between, center, @gap)
}